<template>
  <div>
    <vol-box
      v-model="model"
      :padding="30"
      title="修改密码"
      :width="500"
      :height="250"
    >
      <el-alert type="success">
        <h3>
          <span>帐号：{{ row.UserName }}</span>
          <span>用户：{{ row.UserTrueName }}</span>
        </h3>
      </el-alert>
      <div>
        <el-input
          placeholder="请输入密码"
          v-model="password"
          size="large"
          style="width: 100%; margin-top: 15px"
        />
      </div>
      <template #footer>
        <el-button
          type="priarmy"
          size="mini"
          icon="md-checkmark-circle"
          @click="savePwd()"
          >修改密码</el-button
        >
        <el-button
          type="priarmy"
          size="mini"
          icon="md-close"
          @click="model = false"
          >关闭</el-button
        >
      </template>
    </vol-box>


	<el-drawer
	    v-model="drawer"
		size="15%"
	    title="设置角色"
	    :before-close="handleClose"
	  >
	    <div class="com-el-tree">
	      <el-scrollbar style="height: 100%; width: 100%" class="el-role-tree">
			  <div class="m-title">
			          账户：{{ row.UserTrueName }}
			  </div>
	        <el-tree
			   ref="tree"
	          :data="tree"
			  show-checkbox
			  default-expand-all
	          @node-click="nodeClick"
	          node-key="id"
	          :default-expanded-keys="openKeys"
	          :expand-on-click-node="false"
	          style="padding: 5px 0"
	        >
	          <template #default="{ node, data }">
	            <div class="action-group">
	              <div
	                class="action-text"
	                :class="{
	                  actived: data.id == selectId,
	                  'node-text': data.parentId !== 0,
	                }"
	                :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }"
	              >
	                {{ data.roleName }}
	              </div>
	            </div>
	          </template>
	        </el-tree>
			<div class="m-title">
			        <el-button type="primary"
			                @click="saveRole">保存</el-button>
			</div>
			
	      </el-scrollbar>
		  
	    </div>
		
	  </el-drawer>
	
  </div>
   
</template>
<script>
import { defineComponent, defineAsyncComponent } from "vue";
export default defineComponent({

  
  components: {
    VolBox: defineAsyncComponent(() => import("@/components/basic/VolBox.vue"))
  },
 
  data() {
    return {
      row: {},
      password: "",
      model: false,
	  drawer:false,
	  selectId: -1,
	  checked: false,
	  openKeys: [],
	  data: [],
	  tree: [],
	  source: [],
    };
  },
  methods: {
	saveRole () {
	      //var checkedIds = this.source.filter(x => { return x.checked }).map(x => { return x.id });
		  var checkedIds = this.$refs.tree.getCheckedKeys();//获取选中的节点编码
		  //console.log(this.row.User_Id);
	       var _url = "/api/Fk_reim/saveUserRole?userId=" + this.row.User_Id
	      this.http.post(_url, checkedIds, "正在保存...").then(x => {
	        this.$Message[x.status ? 'info' : 'error'](x.message);
	      });
		  this.drawer = false;
	    },
	 getUserRoles () {//获取当前选择行用户的角色id
	      
	      this.http.post("/api/Fk_reim/getUserRoles?userId=" + this.row.User_Id, {}, true).then(result => {
			console.log(result);
	        this.$refs.tree.setCheckedKeys(result);
	      })
	 },
	 openRoleDrawer(row) {
	      this.row = row;
	      this.drawer = true;
		  this.tree.splice(0);//清空tree数组
		  this.get_Role();
		  this.getUserRoles();
	},
	get_Role() {
	  this.http.post("/api/role/getUserChildRoles", {}, true).then((result) => {
	    if (!result.status) return this.$message.error(result.message);
	    this.data.splice(0);//清空数组
		this.source = result;
	    this.data = result.data;
	    this.data.forEach((x) => {
	      if (x.parentId == 0) {
	        x.lv = 1;
	        x.children = [];
	        this.tree.push(x);
	        this.getTree(x.id, x);
	      }
	    });
	    this.openKeys.push(this.tree[0].id);
	    this.selectId = this.openKeys[0];
	  });
	},
	getTree(id, data) {
	  this.data.forEach((x) => {
	    if (x.parentId == id) {
	      x.lv = data.lv + 1;
	      if (!data.children) data.children = [];
	      data.children.push(x);
	      this.getTree(x.id, x);
	    }
	  });
	},
	nodeClick(node, selected) {

	  this.selectId = node.id;
	  //缓存当前选中的节点
	  //this.$store.getters.data().treeDemo1.treeId = node.id;
	 // this.onChange(node.id);
	},
    open(row) {
      this.password = "";
      this.row = row;
      this.model = true;
    },
    savePwd() {
      if (!this.password) return this.$Message.error("请输密码");
      if (this.password.length < 6)
        return this.$Message.error("密码长度至少6位");
      let url =
        "/api/user/modifyUserPwd?password=" +
        this.password +
        "&userName=" +
        this.row.UserName;
      this.http.post(url, {}, true).then((x) => {
        if (!x.status) {
          return this.$message.error(x.message);
        }
        this.model = false;
        this.$Message.success(x.message);
      });
	  
    },
  },
  created() {},
})
</script>
<style lang="less" scoped>
h3 {
  font-weight: 500;
  > span:last-child {
    margin-left: 30px;
  }
}
.com-el-tree {
  display: inline-block;
  width: 210px;
  .el-role-tree {
    position: absolute;
    padding: 5px 0px;
    top: 45px;
    bottom: 0;
    border-right: 1px solid #eee;
  }
  .actived {
    color: #5884ff;
    font-size: 15px;
  }
  .action-text {
    font-size: 14px;
  }
}
.role-list {
  color: white;
  line-height: 44px;
  background: #1a89ff;
  padding: 0 13px;
  font-size: 16px;
  position: absolute;
  top: 2px;
  width: 210px;
}
.m-title {
  line-height: 40px;
  font-size: 15px;
  background: #66b1ff0f;
  font-weight: bold;
  padding: 6px 16px;
    border: 1px solid #ececec;
  i {
    padding-right: 5px;
  }
}
.com-el-tree ::v-deep(.el-tree-node) {
  padding: 3px 0;
}
.com-el-tree ::v-deep(.el-scrollbar .el-scrollbar__thumb) {
  width: 0 !important;
}
</style>